<template>
  <div>
    <h1>{{ sum }}</h1>
    <button @click="add">点击我+1</button>
  </div>
</template>

<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";

let sum = ref(0);

function add() {
  sum.value += 1;
}

// Vue3中的4个阶段 创建-挂载-更新-卸载
// 创建阶段 就是setup
console.log("创建");

onBeforeMount(() => {
  console.log("挂载前");
});
onMounted(() => {
  console.log("挂载完毕");
});

onBeforeUpdate(() => {
  console.log("更新前");
});
onUpdated(() => {
  console.log("更新完毕");
});

onBeforeUnmount(() => {
  console.log("卸载前");
});
onUnmounted(() => {
  console.log("卸载完毕");
});
</script>
<style scoped></style>
